Text Alignment এবং Text Transformation

Web Development - বুটস্ট্রাপ (Bootstrap 5) - Bootstrap 5 এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি |

বুটস্ট্রাপ ৫-এ টেক্সটের অ্যালাইনমেন্ট এবং ট্রান্সফরমেশন নিয়ন্ত্রণের জন্য বিভিন্ন ক্লাস ব্যবহার করা হয়। টেক্সটের অবস্থান (alignment) এবং ফরম্যাট (transformation) এর মাধ্যমে আপনি কন্টেন্টকে আরও পাঠযোগ্য এবং সুন্দর করে উপস্থাপন করতে পারেন।


টেক্সট অ্যালাইনমেন্ট (Text Alignment)

টেক্সটের অ্যালাইনমেন্টের মাধ্যমে আপনি টেক্সটের অবস্থান নিয়ন্ত্রণ করতে পারেন। বুটস্ট্রাপ ৫ এ, টেক্সটের অ্যালাইনমেন্ট নিয়ন্ত্রণ করার জন্য কয়েকটি ক্লাস রয়েছে:

  • text-left: টেক্সট বাম দিকে সাজানো হয়।
  • text-center: টেক্সট কেন্দ্রীয়ভাবে সাজানো হয়।
  • text-right: টেক্সট ডানে সাজানো হয়।
  • text-justify: টেক্সট সমভাবে (justify) সাজানো হয়, অর্থাৎ, টেক্সট দুটি প্রান্তে বিস্তৃত থাকে।
  • text-nowrap: টেক্সটকে এক লাইনে রাখে, কোনো শব্দ বা বাক্য ভেঙে দেওয়া হয় না।

উদাহরণ: টেক্সট অ্যালাইনমেন্ট

<div class="container">
    <p class="text-left">এটি বাম দিকে সজ্জিত টেক্সট।</p>
    <p class="text-center">এটি কেন্দ্রে সজ্জিত টেক্সট।</p>
    <p class="text-right">এটি ডানে সজ্জিত টেক্সট।</p>
    <p class="text-justify">এটি সমভাবে সজ্জিত টেক্সট, যেখানে পুরো লাইনের দৈর্ঘ্য সমান হয়।</p>
</div>

এখানে:

  • প্রথম প্যারাগ্রাফটি বাম দিকে,
  • দ্বিতীয় প্যারাগ্রাফটি কেন্দ্রে,
  • তৃতীয় প্যারাগ্রাফটি ডানে এবং
  • চতুর্থ প্যারাগ্রাফটি সমভাবে সজ্জিত।

টেক্সট ট্রান্সফরমেশন (Text Transformation)

টেক্সট ট্রান্সফরমেশন বা টেক্সট ফরম্যাটিং-এর মাধ্যমে আপনি টেক্সটের ক্যাপিটালাইজেশন নিয়ন্ত্রণ করতে পারেন। বুটস্ট্রাপ ৫ এ, টেক্সট ট্রান্সফরমেশন নিয়ন্ত্রণের জন্য কিছু সহজ ক্লাস রয়েছে:

  • text-lowercase: টেক্সটকে ছোট হাতের অক্ষরে রূপান্তর করে।
  • text-uppercase: টেক্সটকে বড় হাতের অক্ষরে রূপান্তর করে।
  • text-capitalize: টেক্সটের প্রথম অক্ষরটি বড় হাতের অক্ষরে পরিবর্তিত হয়।

উদাহরণ: টেক্সট ট্রান্সফরমেশন

<div class="container">
    <p class="text-lowercase">এটি ছোট হাতের অক্ষরে লেখা টেক্সট।</p>
    <p class="text-uppercase">এটি বড় হাতের অক্ষরে লেখা টেক্সট।</p>
    <p class="text-capitalize">এটি ক্যাপিটালাইজড টেক্সট, যেখানে প্রতিটি শব্দের প্রথম অক্ষর বড়।</p>
</div>

এখানে:

  • প্রথম প্যারাগ্রাফটি সব ছোট হাতের অক্ষরে থাকবে,
  • দ্বিতীয় প্যারাগ্রাফটি সব বড় হাতের অক্ষরে থাকবে,
  • তৃতীয় প্যারাগ্রাফে প্রতিটি শব্দের প্রথম অক্ষর বড় হবে।

সারাংশ

বুটস্ট্রাপ ৫ এ টেক্সট অ্যালাইনমেন্ট এবং টেক্সট ট্রান্সফরমেশন খুবই সহজে কন্টেন্টের উপস্থাপনাকে নিয়ন্ত্রণ করতে সহায়তা করে। আপনি সহজেই টেক্সটকে বাম, কেন্দ্র অথবা ডান দিকে সাজাতে পারেন, এবং একইভাবে টেক্সটের ক্যাপিটালাইজেশনও কাস্টমাইজ করতে পারেন। এই ক্লাসগুলো ওয়েব ডিজাইনকে আরও পাঠযোগ্য এবং ব্যবহারযোগ্য করে তোলে, বিশেষ করে রেসপন্সিভ ওয়েব ডিজাইনে।

Content added By
Promotion